<div class="container">
  <div class="mb-3 row">
    <div class="col">
      <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Activities</h1>
      <gf-activities-table
        [baseCurrency]="user?.settings?.baseCurrency"
        [dataSource]="dataSource"
        [deviceType]="deviceType"
        [hasActivities]="user?.activitiesCount > 0"
        [hasPermissionToCreateActivity]="hasPermissionToCreateActivity"
        [hasPermissionToDeleteActivity]="hasPermissionToDeleteActivity"
        [hasPermissionToExportActivities]="!hasImpersonationId"
        [locale]="user?.settings?.locale"
        [pageIndex]="pageIndex"
        [pageSize]="pageSize"
        [showActions]="
          !hasImpersonationId &&
          hasPermissionToDeleteActivity &&
          !user.settings.isRestrictedView
        "
        [sortColumn]="sortColumn"
        [sortDirection]="sortDirection"
        [totalItems]="totalItems"
        (activitiesDeleted)="onDeleteActivities()"
        (activityClicked)="onClickActivity($event)"
        (activityDeleted)="onDeleteActivity($event)"
        (activityToClone)="onCloneActivity($event)"
        (activityToUpdate)="onUpdateActivity($event)"
        (export)="onExport()"
        (exportDrafts)="onExportDrafts($event)"
        (import)="onImport()"
        (importDividends)="onImportDividends()"
        (pageChanged)="onChangePage($event)"
        (sortChanged)="onSortChanged($event)"
      />
    </div>
  </div>

  @if (
    !hasImpersonationId &&
    hasPermissionToCreateActivity &&
    !user.settings.isRestrictedView
  ) {
    <div class="fab-container">
      <a
        class="align-items-center d-flex justify-content-center"
        color="primary"
        mat-fab
        [queryParams]="{ createDialog: true }"
        [routerLink]="[]"
      >
        <ion-icon name="add-outline" size="large" />
      </a>
    </div>
  }
</div>
